<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>关联ERP商品SKU</title>
    <link rel="stylesheet" href="/layui/css/layui.css">

    <script src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script type="text/javascript" src="/js/hy.js"></script>
</head>
<body>

<div class="" style="padding:15px;">
   
    <!-- content starts -->

    <form class="layui-form layui-form-pane1" id="form" >
        <fieldset class="layui-elem-field">
            <legend>关联ERP商品SKU<span style="color: red">[[${msg}]]</span></legend>
            <div class="layui-field-box">
                
                    <input type="hidden" name="goodsId"  th:value="${goodsId}"/>
                    <div class="layui-form-item">
      
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">保存</button>
                        </div>
                    </div>
                
            </div>
        </fieldset>
    <!--<form class="layui-form layui-form-pane1" method="post">-->
    <table class="layui-table" lay-even lay-skin="row">
        <thead>
        <tr>
            <!-- <th width="55px"></th> -->
            <th width="200px">PDD SKU</th>
            <th  width="200px">ERP SKU</th>
  
        </tr>
        </thead>
        <tbody>
        <tr th:each="item:${lists}">
    
            <!-- <td width="55px">
                <img th:src="${item.image}" class="pimg" th:if="${#strings.isEmpty(item.image) == false}"
                     style="float: left; width: 50px;">
            </td> -->

            <td >
                <!-- <p  th:text="${item.name}" style="color:#ababae;size: 12px;"></p> -->
                <p style="color:#ababae;size: 12px;">
                    <span th:text="${item.spec}" ></span>
                </p>
                <p th:text="${item.outerId}"></p>
           
            </td>

            <td >
                <select class="layui-inline skuListSelect" lay-search=""  name="erpSku[]">
                    <option value="">请选择</option>
                    <option th:each="it:${erpSkuList}" th:if="${it.id == item.erpGoodsSpecId}" selected th:value="${item.id + '-' + it.id}" th:text="${it.spec}"></option>
                    <option th:each="it:${erpSkuList}" th:if="${it.id != item.erpGoodsSpecId}"  th:value="${item.id + '-' + it.id}" th:text="${it.spec}"></option>
                </select>
            </td>
           

        </tr>
        </tbody>
    </table>
</form>
    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>


    <script type="text/javascript">
         var index = 0;
        try
        {
            index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        }
        catch(err)
        {
            //在此处理错误
        }
        var erpSkuList ;
        layui.use(['laydate', 'jquery', 'form', 'layer'], function () {
            var laydate = layui.laydate;
            $ = layui.jquery;
            var form = layui.form;
            layer = layui.layer;

            //监听提交
            form.on('submit(demo1)', function (data) {
                var skuCode ='';
                $(".skuListSelect").each(function(d,i){
                    if($(this).val() == ''){
                        // alert('请选择');
                        // return false;
                    }else{
                        skuCode += $(this).val()+",";
                    }
                });
                if(skuCode == '') {
                    alert('没有关联任何数据');
                    return false;
                }
                var goodsId = '[[${goodsId}]]';
                //console.log(data.field);
                $.ajax({
                    url: "/shop/link_erp_goods_spec_all_ajax",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify({goodsId:goodsId,skuCode:skuCode}),
                    success: function (res) {
                        if (res.code == 0) {
                            alert("关联成功");
                            try {
                                // parent.shelf(locationName + "  " + reservoirName + "  " + shelfName);
                                parent.layer.close(index);
                                parent.location.reload();
                            } catch (e) {
                            }

                        } else {
                            alert(res.msg);
                        }
                    }
                });
                return false;
            })
        });
        $(function () {
            // var js ='[[${erpSkuListJSON}]]';
            // js = js.replace("&quot;","'");
            // console.log(js);
            // erpSkuList = eval("("+js+")");
            // var skuListSelect1 = $('.skuListSelect').first();
            // console.log(erpSkuList);
            // var selHtml='<option value="${item.id}" ></option>'
            // $(erpSkuList).forEach(element => {
            //     console(element);
            // });


            $(".pimg").click(function(){
                var _this = $(this);//将当前的pimg元素作为_this传入函数
                imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
            });

            function imgShow(outerdiv, innerdiv, bigimg, _this){
                var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
                $(bigimg).attr("src", src);//设置#bigimg元素的src属性

                /*获取当前点击图片的真实大小，并显示弹出层及大图*/
                $("<img/>").attr("src", src).load(function(){
                    var windowW = $(window).width();//获取当前窗口宽度
                    var windowH = $(window).height();//获取当前窗口高度
                    var realWidth = this.width;//获取图片真实宽度
                    var realHeight = this.height;//获取图片真实高度
                    var imgWidth, imgHeight;
                    var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

                    if(realHeight>windowH*scale) {//判断图片高度
                        imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                        imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                        if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                            imgWidth = windowW*scale;//再对宽度进行缩放
                        }
                    } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                        imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                        imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
                    } else {//如果图片真实高度和宽度都符合要求，高宽不变
                        imgWidth = realWidth;
                        imgHeight = realHeight;
                    }
                    $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

                    var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
                    var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
                    $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
                    $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
                });

                $(outerdiv).click(function(){//再次点击淡出消失弹出层
                    $(this).fadeOut("fast");
                });
            }
            //$('table tr:not(:first)').remove();
            // var len = $('table tr').length;
            // for (var i = 1; i < len; i++) {
            //     $('table tr:eq(' + i + ') td:first').text(i);
            // }

        });



    </script>
</div>
</body>
<html>
